<template>
  <div class="login-box">
    <div class="content-box">
      <div class="title">
        <h2>后台管理系统 | 用户登录</h2>
      </div>
      <el-form :model="userForm" :rules="userFormRules" class="form-box" ref="userRefForm">
        <el-form-item prop="userName">
          <el-input placeholder="用户名" v-model="userForm.userName" maxlength="16" size="medium">
            <template #suffix>
              <i class="el-input__icon el-icon-user-solid"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
          <el-input
            type="password"
            placeholder="密码"
            v-model="userForm.userPassword"
            maxlength="16"
            auto-complete="new-password"
            size="medium"
          >
            <template #suffix>
              <i class="el-input__icon el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" class="btn" @click="loginFunc" size="medium">登录</el-button>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    setup: () => {
      const router = useRouter()
      const userForm = reactive({
        userName: 'admin',
        userPassword: '123456'
      })
      const userFormRules = reactive({
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ]
      })
      const loginFunc = () => {
        if (userForm.userName == 'admin' && userForm.userPassword == '123456') {
          router.push({ name: 'Home' })
        }
      }
      return { userForm, userFormRules, loginFunc }
    }
  })
</script>

<style lang="scss" scoped>
  .login-box {
    background-image: url('@/assets/img/bg.png');
    filter: blur(0px);
    transform: scale(1);
    position: absolute;
    display: block;
    object-fit: cover;
    opacity: 1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 1;
    transition: all 0.4s;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    transition-timing-function: ease;
    width: 100%;
    height: 100%;
    position: fixed;
    &::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.1;
    }
    .content-box {
      position: absolute;
      right: 15%;
      top: 50%;
      width: 450px;
      height: 350px;
      margin-top: -175px;
      background-color: #fff;
      border-radius: 6px;
      z-index: 999;
      .title {
        text-align: center;
        line-height: 4;
      }
      .form-box {
        width: 80%;
        margin: 0 10%;
        .el-input {
        }
      }
      .btn {
        width: 80%;
        margin: 0 10%;
      }
    }
  }
</style>
